<template>
  <div
    id="ltlManage"
    class="el-main-padding"
    v-loading="loading"
  >
    <div class="my-breadcrumb-div">
      <i class="el-icon-location my-breadcrumb-icon my-breadcrumb-padding" />
      <el-breadcrumb
        class="my-breadcrumb-padding"
        separator="/"
      >
        <el-breadcrumb-item>
          <!--配置-->
          {{ $t('message.ltlManage.breadcrumb.crumb1') }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <!--分级管理-->
          {{ $t('message.ltlManage.breadcrumb.crumb2') }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form
      ref="ltlManageForm"
      :model="ltlManageForm"
      :rules="ltlManageFormRules"
      label-width="120px"
      inline
    >
      <el-row class="margin-bottom-row config-row">
        <el-col>
          <el-card>
            <div
              class="card-header-div config-header-div"
            >
              <!--分级管理参数-->
              {{ $t('message.ltlManage.card1.header') }}
            </div>
            <!--网控名称-->
            <el-form-item
              :label="$t('message.ltlManage.card1.form.label1')"
              prop="name"
            >
              <el-input
                class="select-width"
                v-model="ltlManageForm.name"
              />
            </el-form-item>
            <!--访问地址-->
            <el-form-item
              :label="$t('message.ltlManage.card1.form.label2')"
              prop="visit_address"
            >
              <el-input
                class="select-width"
                v-model="ltlManageForm.visit_address"
              />
            </el-form-item>
            <!--是否为根网控-->
            <el-form-item
              :label="$t('message.ltlManage.card1.form.label3')"
              prop="root"
            >
              <el-switch
                v-model="ltlManageForm.root"
                active-color="#4e6d9d"
                inactive-color="#C0C4CC"
              />
            </el-form-item>
            <br>
            <!--上级地址-->
            <el-form-item
              v-if="!ltlManageForm.root"
              :label="$t('message.ltlManage.card1.form.label4')"
              prop="higher_host"
            >
              <el-input
                class="select-width"
                v-model="ltlManageForm.higher_host"
              />
            </el-form-item>
            <el-row style="text-align: right">
              <el-col>
                <el-button
                  v-if="$store.state.is_staff"
                  @click="ltlManageConfigureSubmit"
                  type="primary"
                >
                  <span style="padding: 0 40px">
                    <!--提交-->
                    {{ $t('message.ltlManage.submitButtonText') }}
                  </span>
                </el-button>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="12">
        <el-card>
          <div
            id="treeChart"
            style="height: 500px"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'LtlManage',
  data () {
    return {
      loading: true,

      ltlManageForm: {
        uid: '',
        name: '',
        root: '',
        visit_address: '',
        higher_uid: '',
        higher_host: '',
        is_registered: false
      },
      ltlManageFormRules: {
        name: [
          // 请输入网控名称
          { required: true, message: this.$t('message.ltlManage.validate.ltl.err1'), trigger: 'blur' }
        ],
        root: [
          // 请选择是否为根网控
          { required: true, message: this.$t('message.ltlManage.validate.ltl.err2'), trigger: 'blur' }
        ],
        visit_address: [
          // 请输入访问地址
          { required: true, message: this.$t('message.ltlManage.validate.ltl.err3'), trigger: 'blur' }
        ],
        higher_host: [
          // 请输入上级地址
          { required: true, message: this.$t('message.ltlManage.validate.ltl.err4'), trigger: 'blur' }
        ]
      },

      treeChart: null
    }
  },
  mounted () {
    let self = this
    self.$nextTick(async () => {
      await self.getLtlConfigure()
      await self.$store.dispatch('getLtlTree')
      self.createTreeChart()
    })
  },
  methods: {
    async getLtlConfigure () {
      let self = this
      self.loading = true
      let resposne = await self.$store.dispatch('axios', {
        method: 'get',
        url: '/api/abs/ltl/configure/'
      })
      self.ltlManageForm.uid = resposne.data.uid
      self.ltlManageForm.name = resposne.data.name
      self.ltlManageForm.root = resposne.data.root
      self.ltlManageForm.visit_address = resposne.data.visit_address
      self.ltlManageForm.higher_uid = resposne.data.higher_uid
      self.ltlManageForm.higher_host = resposne.data.higher_host
      self.ltlManageForm.is_registered = resposne.data.is_registered
      self.loading = false
    },
    ltlManageConfigureSubmit () {
      let self = this
      self.$refs['ltlManageForm'].validate(async valid => {
        if (valid) {
          await self.$store.dispatch('axios', {
            method: 'post',
            url: `/api/abs/ltl/configure/`,
            data: {
              name: self.ltlManageForm.name,
              visit_address: self.ltlManageForm.visit_address,
              root: self.ltlManageForm.root,
              higher_host: self.ltlManageForm.root ? '' : self.ltlManageForm.higher_host
            }
          })
          // 修改成功
          self.$message.success(self.$t('message.common.info.modifySuccess'))
          self.getLtlConfigure()
        }
      })
    },
    // 网控中心树图
    createTreeChart () {
      let self = this
      if (self.treeChart === null) {
        self.treeChart = echarts.init(document.getElementById('treeChart'))
      }
      self.treeChart.setOption({
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            top: '50px',
            right: 0,
            bottom: '50px',
            left: 0,
            symbol: 'rect',
            symbolSize: [120, 60],
            orient: 'vertical',
            expandAndCollapse: false,
            lineStyle: {
              curveness: 0
            },
            label: {
              position: 'inside',
              verticalAlign: 'middle',
              align: 'middle',
              distance: 18,
              fontSize: 12,
              padding: 5,
              borderWidth: 4,
              borderRadius: 5,
              color: '#fff',
              backgroundColor: 'transparent',
              formatter: (params) => {
                // 名称   地址
                return `${self.$t('message.home.mapCard.treeLabel.label1')}: ${params.name}\n${self.$t('message.home.mapCard.treeLabel.label2')}: ${params.data.address}`
              }
            },
            leaves: {
              label: {
                position: 'inside',
                verticalAlign: 'middle',
                align: 'middle'
              }
            },
            data: self.$store.getters.LtlTreeChart
          }
        ]
      })
      self.treeChart.on('click', async (params) => {
        if (!params.data.is_online) {
          // 该网控未在线,无法访问!
          self.$message.error(self.$t('message.home.mapCard.ltlErr.ncpNotOnline'))
        } else {
          // 取回本网控UID并检验
          let selfNetworkUid = self.$store.state.selfNetworkUid
          if (selfNetworkUid) {
            let url = window.location.href.split('#')[0]
            if (selfNetworkUid === params.data.uid) {
              window.open(`${url}`)
            } else {
              localStorage.setItem(params.data.uid, JSON.stringify(params.data))
              window.open(`${url}#/?uid=${params.data.uid}`)
            }
          } else {
            // 获取分级管理信息失败
            self.$message.error(self.$t('message.home.mapCard.ltlErr.getInfoErr'))
          }
        }
      })
    }
  }
}
</script>

<style scoped>
  .config-row{
    text-align: left;
  }
  .config-header-div{
    float: none;
    margin-bottom: 10px;
  }
</style>
